<template>
	<el-container style="height: 100vh;background-color: #F8F8F8; width: 100%;">
		<el-header class="header">
			<div class="logo-wraper">
				<div><img src="../../assets/logo.png" style="width: 36px;margin:10px 5px 5px 20px;" /></div>
				<div style="font-weight: bold; line-height: 60px; font-size: 16px;">Pano全景编辑器</div>
			</div>
			<div style="flex:1;">
				aaa
			</div>
			<div style="display: flex;">
				<div style="margin-top: 8px;">
					<el-avatar :size="40" :src="userinfo.avatar" />
				</div>
			 <el-dropdown trigger="click" @command="handleCommand">
				<div style="cursor: pointer; margin: 20px 20px 20px 5px; ">
					<div>
					 {{userinfo.nickname}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
					</div>
				</div>
				 <template #dropdown>
				   <el-dropdown-menu>
					 <el-dropdown-item icon="Avatar" command="profile">个人信息</el-dropdown-item>
					 <el-dropdown-item icon="CircleClose" command="exit">退出系统</el-dropdown-item>
				   </el-dropdown-menu>
				 </template>
			   </el-dropdown>
			</div>
		</el-header>
		<el-container>
			<el-aside width="200px" style="height: calc(100vh-50px);">
				<el-menu :default-active="activeMenu"  :default-openeds="defaultopeneds" style="height: 100%;">
					<router-link to="/res/tour">
						<el-menu-item index="tour">
							<el-icon>
								<Grid />
							</el-icon>
							<span>作品管理</span>
						</el-menu-item>
					</router-link>
					<el-sub-menu index="res">
						<template #title>
							<el-icon>
								<Files />
							</el-icon>
							<span>资源管理</span>
						</template>
						<router-link to="/res/panorama">
							<el-menu-item index="panorama">
								<el-icon>
									<Menu />
								</el-icon>
								<span>全景</span>
							</el-menu-item>
						</router-link>
						<router-link to="/res/picture">
							<el-menu-item index="picture">
				
								<el-icon>
									<Picture />
								</el-icon>
								<span>图片</span>
				
							</el-menu-item>
						</router-link>
						<router-link to="/res/video">
							<el-menu-item index="video">
								<el-icon>
									<Film />
								</el-icon>
								<span>视频</span>
							</el-menu-item>
						</router-link>
						<router-link to="/res/audio">
							<el-menu-item index="audio">
								<el-icon>
									<Headset />
								</el-icon>
								<span>音频</span>
							</el-menu-item>
						</router-link>
						<router-link to="/res/model">
							<el-menu-item index="model">
								<el-icon>
									<ElementPlus />
								</el-icon>
								<span>模型</span>
							</el-menu-item>
						</router-link>
					</el-sub-menu>
				</el-menu>
				
			</el-aside>
			<el-main style="background-color: #FFF; margin: 20px;border: 1px solid #ececec;">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				activeMenu: 'tour',
				defaultopeneds: ["res"],
				userinfo:{
					nickname:'',
					avatar:''
				}
			}
		},
		mounted() {
			this.userinfo=JSON.parse(localStorage.getItem("userinfo"));
		},
		methods: {
			handleCommand(cmd) {
				switch (cmd) {
					case "exit":
						this.$confirm("确定要退出登录吗？","提示",{
							type: "warning"
						}).then(() => {
							this.$router.push("/");
						}).catch(() => {

						})
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.logo-wraper {
		height: 60px;
		width: 200px;
		border-bottom: 1px solid #ebebeb;
		display: flex;
	}
	
	.header{
		display: flex;
		padding: 0px;
		background-color: #FFF;
		-webkit-box-shadow: 2px 10px 5px 0 rgba(0, 0, 0, .1);
		box-shadow: 2px 5px 5px 0 rgba(0, 0, 0, .1);
		border-bottom: 1px solid #dcdfe6;
	}
 
 

	.el-menu-item {
		height: 40px;
	}

	.el-menu-item {
		.is-active {
			background-color: #e9f1ff;
		}
	}
</style>